<template>
  <div class="layout">
    <Layout>
      <Sider 
        ref="side1" 
        width="160"
        v-model="isCollapsed" 
        :collapsed-width="0"
        :style="{background:'#fff'}"
        hide-trigger 
        collapsible
      >

        <Menu 
          active-name="configs"  
          width="auto" 
          :class="['menu-item',isCollapsed ? 'collapsed-menu' : '']"
          @on-select="setRouterview"
        >
          <Submenu name="configs">
            <template slot="title">
                <Icon type="ios-navigate" />
                <span>设置</span>
            </template>
            <MenuItem name="config">
              <span>系统设置</span>
            </MenuItem>
            <MenuItem name="setnav">
              <span>目录设置</span>
            </MenuItem>
            <MenuItem name="sortnav">
              <span>分类排序</span>
            </MenuItem>
          </Submenu>

          <Submenu name="imgs">
            <template slot="title">
                <Icon type="ios-images" />
                <span>图片</span>
            </template>
            <MenuItem name="img">
              <!-- <Icon type="search"></Icon> -->
              <span>图片管理</span>
            </MenuItem>
            <MenuItem name="photosclassify">
              <!-- <Icon type="settings"></Icon> -->
              <span>图片分类</span>
            </MenuItem>
            <MenuItem name="photos">
              <!-- <Icon type="images"></Icon> -->
              <span>图集管理</span>
            </MenuItem>
          </Submenu>
          <MenuItem name="opuslist">
            <Icon type="ios-list-box" />
            <span>文章列表</span>
          </MenuItem>
          
          <MenuItem name="dir">
            <Icon type="ios-folder" />
            <span>文件管理</span>
          </MenuItem>
          <Submenu name="tbks">
            <template slot="title">
                <Icon type="ios-rose" />
                <span>淘宝客</span>
            </template>
            <MenuItem name="tbk">
              <span>商品搜索</span>
            </MenuItem>
            <MenuItem name="commodity">
              <span>商品列表</span>
            </MenuItem>
          </Submenu >
          <Submenu name="shakes">
            <template slot="title">
                <Icon type="md-swap" />
                <span>摇一摇</span>
            </template>
            <MenuItem name="shake">
              <span>摇一摇房间</span>
            </MenuItem>
          </Submenu >
        </Menu>
      </Sider>

      <Layout>
        <Header :style="{padding: 0,background:'#fff'}" class="layout-header-bar" >
          <Icon @click.native="collapsedSider" :class="['menu-icon',isCollapsed ? 'rotate-icon' : '']" :style="{margin: '0px 20px 0'}" type="md-reorder" size="28"></Icon>
        </Header>

        <Content class="router-view" :style="{margin: '0.5rem', background: '#fff'}">
          <!-- <router-view name="sortnav"></router-view> -->
          
          <div class="view-top">
            <template v-for="value,index in viewArr">
              <Tag 
                v-if="value.activation"
                closable
                @on-close="handleClose(index)"
                type="border" 
                :color="value.view == activationView ?'blue':''"
              >
                <samp @click="chooseTab(value.view)" > {{value.name}}</samp>
              </Tag>
            </template>
          </div>
          
          <keep-alive>  
            <router-view  v-if="$route.meta.keepAlive" ></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </Content>
      </Layout>
    </Layout>

    <BackTop></BackTop>
    
  </div>
</template>

<script>

export default {
  name: 'BaseAdmin',
  components: {
  },
  data () {
    return {
      isCollapsed: false,
      activationView:"config",
      viewArr:[
        {activation:false,view:"config",name:"系统设置"},
        {activation:false,view:"img",name:"图片管理"},
        {activation:false,view:"photosclassify",name:"相册管理"},
        {activation:false,view:"photos",name:"图集管理"},
        {activation:false,view:"setnav",name:"栏目设置"},
        {activation:false,view:"opuslist",name:"文章管理"},
        {activation:false,view:"dir",name:"目录设置"},
        {activation:false,view:"sortnav",name:"排序目录"},
        {activation:false,view:"tbk",name:"淘宝客"},
        {activation:false,view:"commodity",name:"商品列表"},
        {activation:false,view:"shake",name:"摇一摇"},
      ],
    }
  },
  created:function() {
    
  },
  mounted:function(){
    this.$store.dispatch('getNavArr');//后台加载分类
    this.$store.dispatch('getOpusList');//后台加载文章列表
    this.$store.dispatch('getImgClassifyArr');//加载图片分类
    this.$store.dispatch('getImgArr');//加载所有图片
  },
  computed: {
    rotateIcon :function() {
      return [
      'menu-icon',
      this.isCollapsed ? 'rotate-icon' : ''
      ];
    },
    menuitemClasses:function() {
      return [
      'menu-item',
      this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  },
  
  methods: {
    //开启关闭侧边栏
    collapsedSider:function () {
      this.$refs.side1.toggleCollapse();
    },
    // 设置显示哪些模款
    setRouterview:function(name){
      this.activationView=name;
      this.viewArr.forEach((item)=>{
        if(item.view == name){
          item.activation=true;
        }
      });
      this.$router.push('/'+name)
    },
    // 关闭tab
    handleClose:function(index){
      this.viewArr[index].activation=false;
    },
    //切换视图
    chooseTab:function(name){
      this.activationView=name;
      this.$router.push('/'+name)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
  
</style>
